.layout {
	height: 100vh;

	.side-content {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;

		.side-bar {
			flex: 1;
			scrollbar-width: none;
			scrollbar-width: none;
			/* firefox */
			-ms-overflow-style: none;
			/* IE 10+ */
			overflow-x: hidden;
			overflow-y: auto;


			&::-webkit-scrollbar {
				display: none;
				/* Chrome Safari */
			}
		}

	}

	.tags-nav {
		border-top: 1px solid #f0f0f0;
		border-bottom: 1px solid #f0f0f0;
		background-color: #f0f0f0;
		width: 100%;
		position: relative;
		height: 40px;

		.ivu-tag:hover {
			opacity: 0.8;
			cursor: pointer;
		}

		.ivu-tag-dot,
		.ivu-tag-dot-inner {
			transition: all .5s;
		}

		.close-con{
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			background: #fff;
			text-align: center;
			z-index: 10;
		}

		.contextmenu {
			position: absolute;
			z-index: 11;

			position: absolute;
			margin: 0;
			padding: 5px 0;
			background: #fff;
			z-index: 1000;
			list-style-type: none;
			border-radius: 4px;
			box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .1);

			li {
				margin: 0;
				padding: 5px 15px;
				cursor: pointer;

				&:hover {
					background: #eee;
				}
			}
		}

		.btn-con {

			height: 100%;
			padding-top: 3px;

			button {
				padding: 6px 4px;
				line-height: 14px;
				text-align: center;
			}
		}



		.right-btn,
		.left-btn {
			position: absolute;
			background-color: white;
			border-right: 1px solid #f0f0f0;
			z-index: 10;
		}

		.right-btn {
			right: 32px;
		}

		.scroll-outer {
			position: absolute;
			left: 28px;
			top: 0;
			bottom: 0;
			right: 60px;
			box-shadow: inset 0 0 3px 2px hsla(0, 0%, 39.2%, .1);
			overflow: hidden;

			.scroll-body {
				transition: all .2s;
				position: absolute;
				align-items: center;
				padding: 1px 4px 0;
				left: 0;
				white-space: nowrap;
				overflow: visible;

				div {
					display: inline-block;
					margin: 2px 4px 2px 0;
				}
			}
		}

	}


	>.ivu-layout {
		height: 100%;
	}

	.header-bar {
		background-color: white;
		padding: 0 20px;

		.full-screen-btn-con:hover{
			cursor: pointer;
		}

		.collapsed-icon:hover {
			color: #2D8CF0;
			cursor: pointer;
		}

		&-row {
			padding-right: 20px;

			&-avatar:hover {
				cursor: pointer;
			}

			.icon {
				vertical-align: middle;
			}
		}
	}

	.layout-header-bar {
		padding: 0;
	}

	.main-content-con {
		flex: 1;
		display: flex;

		.main-layout-con {
			width: 100%;

			.content-wrapper {
				width: 100%;
				overflow: auto;
				height: 0;
				padding: 20px;
			}
		}


	}

	.logo-con {
		height: 64px;
		padding: 10px;
		overflow: hidden;

		img {
			height: 44px;
			width: auto;
			display: block;
			margin: 0 auto;
		}
	}

	.collapsed-menu {
		display: grid;
		// row-gap: 10px;
		overflow: hidden;
		justify-content: center;

		&-item {
			height: 49px;
			display: flex;
			align-items: center;
		}

		.collapsed-item {

			.ivu-dropdown-item {
				white-space: nowrap;
			}

			.ivu-dropdown-menu {
				min-width: 120px;
			}

			.drop-menu-a {
				display: flex;
				align-items: center;
				padding: 8px 0 8px 16px;
				// box-sizing: border-box;

				.icon {
					margin-right: 3px;
				}
			}
		}

		.menu-icon:hover {
			cursor: pointer;
		}

		&-row {
			background-color: red;
		}
	}


	.custom-enter-active {
		transform: translateX(-10px);
		opacity: 0;

	}

	.custom-leave-active {
		transform: translateX(10px);
		opacity: 0;
	}

}